<template>
  <view class="content">
    <u-form class="form" :model="course" ref="uForm">
      <u-form-item prop="name" class="inputWrapper">
        <u-input v-model="course.name" placeholder="课程名" />
      </u-form-item>
      <u-form-item prop="introduce" class="inputWrapper">
        <u-textarea placeholder="课程介绍" v-model="course.introduce" />
      </u-form-item>
      <u-upload
        style="margin-top: 20upx"
        :fileList="fileList1"
        @afterRead="afterRead"
        @delete="deletePic"
        name="1"
        multiple
        :previewFullImage="true"
        :maxCount="1"
      ></u-upload>
      <view class="loginBtn">
        <view class="btnValue" @click="updateCourse">提交</view>
      </view>
    </u-form>
  </view>
</template>

<script>
import api from '@/api/teach/api.js'
export default {
  data() {
    return {
      course: {
        teacherId: '', //教师id
        name: '', // 课程名
        introduce: '', // 课程介绍
        avatar: '', // 课程图片
      },
      fileList1: [],
    }
  },
  methods: {
    updateCourse() {
      this.$http
        .getMethod(api.addCourse, this.course)
        .then((res) => {
          if (res.code != 200) {
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
          } else {
            uni.navigateTo({
              url:
                '/pages/teacher/index/index?teacherId=' + this.course.teacherId,
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中',
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url, lists[i].name)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: 'success',
            message: '',
            url: result,
          })
        )
        fileListLen++
      }
    },
    uploadFilePromise(url, name) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: api.saveImg, // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'photo',
          formData: {
            type: 1,
            id: name,
          },
          success: (res) => {
            resolve(res.data.data)
            let data = res.data
            data = JSON.parse(data)
            this.course.avatar = data.message
            console.log(this.course.avatar)
          },
        })
      })
    },
  },
  onLoad(option) {
    this.course.teacherId = option.id
  },
}
</script>

<style scoped lang="less">
.content {
  padding: 20rpx;
}
.w70 {
  width: 70%;
}
.u-form-item {
  border-bottom: 1upx solid #000;
}
.loginBtn {
  width: 100%;
  height: 80upx;
  background: #77b307;
  border-radius: 50upx;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginBtn .btnValue {
  color: white;
}
</style>
